import {
  Input,
  Select,
  InputNumber,
  Button,
  Radio,
  Checkbox,
  Modal,
  Table,
  Popconfirm,
} from 'antd';
import { connect } from 'net';

const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;

export default class SelectMatchForm extends React.Component {
  state = {};

  okHandle = item => {
    const { handleAdd } = this.props;
    handleAdd(item);
  };

  getTitle = () => {
    return '选择赛事';
  };

  close = () => {
    const { handleModalVisible } = this.props;
    handleModalVisible();
  };

  render() {
    const { modalVisible, matchList, onChange } = this.props;

    const comparePhase = (obj2, obj1) => {
      var val1 = obj1.phaseSeq;
      var val2 = obj2.phaseSeq;
      var val3 = obj1.round;
      var val4 = obj2.round;
      var val5 = obj1.fenzuName;
      var val6 = obj2.fenzuName;
      var val7 = obj1.id;
      var val8 = obj2.id;
      if (val1 < val2) {
        return 1;
      } else if (val1 > val2) {
        return -1;
      } else {
        if (val3 < val4) {
          return 1;
        } else if (val3 > val4) {
          return -1;
        } else {
          if (val5 < val6) {
            return 1;
          } else if (val5 > val6) {
            return -1;
          } else {
            if (val7 < val8) {
              return 1;
            } else if (val7 > val8) {
              return -1;
            } else {
              return 0;
            }
          }
        }
      }
    };
    const datas = [];
    matchList.list &&
      matchList.list.forEach(value => {
        if (!value.placeCode && !value.zubiePlaceCode) {
          datas.push(value);
        }
      });

      datas.sort(comparePhase);

    const columns3 = [
      {
        title: '比赛编号',
        dataIndex: 'bisaiId',
      },
      {
        title: '轮次',
        dataIndex: 'roundName',
      },
      {
        title: '抽签号',
        dataIndex: 'gamePosName1',
      },
      {
        title: '所属团队',
        dataIndex: 'team1',
      },
      {
        title: '运动员',
        dataIndex: 'athlethList1',
        render: value => (
          <span>
            {value &&
              value
                .map(value => {
                  return value.userName;
                })
                .join(',')}
          </span>
        ),
      },
      {
        title: '对阵',
        render: () => <span>VS</span>,
      },
      {
        title: '抽签号',
        dataIndex: 'gamePosName2',
      },
      {
        title: '所属团队',
        dataIndex: 'team2',
      },
      {
        title: '运动员',
        dataIndex: 'athlethList2',
        render: value => (
          <span>
            {value &&
              value
                .map(value => {
                  return value.userName;
                })
                .join(',')}
          </span>
        ),
      },
      {
        title: '选择',
        width: 100,
        render: (value, item) => (
          <div>
            <Button
              style={{ marginRight: 5 }}
              onClick={() => {
                this.okHandle(item);
                this.close();
              }}
            >
              选择
            </Button>
          </div>
        ),
      },
    ];

    return (
      <Modal
        title={this.getTitle()}
        width={1000}
        visible={modalVisible}
        onCancel={() => this.close()}
        maskClosable={false}
      >
        <div style={{ marginBottom: 30 }}>
          <Table dataSource={datas} pagination={matchList.pagination} size="small" columns={columns3} onChange={onChange}/>
        </div>
      </Modal>
    );
  }
}
